// 从右往左进入, 这个是路由的转场动画
.slide-left-enter {
    transform: translate3d(100%, 0, 0);
  }
  
  .slide-left-enter-active,
  .slide-left-leave-active,
  .slide-right-leave-active {
    position: fixed;
    // 启用硬件加速
    will-change: transform;
    transition: transform 300ms;
  }
  
  .slide-left-enter-active {
    z-index: 98;
  }
  
  .slide-left-leave-active {
    z-index: 90;
  }
  
  .slide-right-leave-active {
    z-index: 100;
    transform: translate3d(100%, 0, 0);
  }
  
  // 从下往上进入, 从上往下离开的动画, 这个是页面内弹出层的动画
  .slide-down-up-enter,
  .slide-down-up-leave-to {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  
  .slide-down-up-leave,
  .slide-down-up-enter-to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  
  .slide-down-up-enter-active,
  .slide-down-up-leave-active {
    // 启用硬件加速
    will-change: transform;
    transition: all 240ms;
  }
  
  // 透明度动画
  .fade-in-enter,
  .fade-in-leave-to {
    opacity: 0;
  }
  
  .fade-in-leave,
  .fade-in-enter-to {
    opacity: 1;
  }
  
  .fade-in-enter-active,
  .fade-in-leave-active {
    // 启用硬件加速
    will-change: transform;
    transition: all 240ms;
  }